<template>
	<view>
        <uv-loading-page :loading="isLoadding"  bgColor="#16313a" loadingColor="#fff" color="#fff" loadingText="获取购票场次中..." loading-mode="circle"></uv-loading-page>
        <template v-if="!isLoadding">
            <view class="cinema-box">
                <text>{{ Cinema.name }}</text>{{ Cinema.address }}
            </view>
            <template v-if="Movie1">
              <!--  <view class="movie-box" v-for="(item,index) in MovieList">
                    <view class="image" :style="`background-image:url(${item.logo})`"></view>
                    <text>{{item.name}}</text>
                    {{ item.state }} / {{ item.duration }}分钟 / {{ item.type }}
                </view> -->
				<view class="movie-box">
				    <view class="image" :style="`background-image:url(${Movie1.logo})`"></view>
				</view>
				<view class="list1">
					 <view  class="list1_item" :class="`${MovieIndex == index?'bg-line-color':''}`" v-for="(item,index) in MovieList" :key="index" @click="changeMovie(index)">{{item.name}}</view>
				</view>
                <view class="date-box">
                    <view class="_button bg-line-color" :class="`${playIndex == index?'_button-fill':''}`" v-for="(item , index) in playDates" :key="index" @click="changeDate(index)">
                        <view class="_button-inner">{{ item }}</view>
                    </view>
                </view>

                <view class="movie_session-wrap">
                    <template v-if="movieSessionList.length > 0">
                        <view class="movie_session-item--wrap" v-for="(item, index) in movieSessionList" :key="index" @click="resolveSeat(item)">
                            <view class="fx-center-middle">
                                <text class="info_time">{{formatDateToTime(item.playtime)}}</text>
                                <text class="fc-tips">{{formatDateToTime(item.closetime)}}散场</text>
                            </view>
                            <view class="fx-center-middle">
                                <template v-if="item.gameStatus && item.gameMinTicketNum">
                                    <text class="van-ellipsis" v-if="item.gameStatus==1">成团中，还差{{item.gameMinTicketNum - item.gameJoinTicketNum}}人</text>
                                    <text class="van-ellipsis" v-if="item.gameStatus==2">已成团，{{item.gameJoinTicketNum}}人已参加</text>
                                    <text class="van-ellipsis" v-if="item.gameStatus==3">成团失败</text>
                                </template>
                                <text class="van-ellipsis" v-else>{{item.edition}}</text>
                                <!-- 成团中，还差32人,已成团，78人已参加 -->
                                <text class="fc-tips">{{item.roomname}}</text>
                            </view>
                            <view class="fx-center-middle">
                                <image :src="uniConfig.ssoPath + item.gameTeamIcon" mode="aspectFit" style="width:72rpx;height:52rpx;" v-if="item.gameTeamIcon"/>
                                <text class="fc-active"><text style="font-size: 12px;">￥</text>{{item.price / 100}}</text>
                            </view>
                            <view class="fx-center-middle">
                                <view class="_button bg-line-color _button-fill">
                                    <view class="_button-inner">购票</view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <view v-else style="margin-top:8vh">
                        <uv-empty text="今天的场次已售完"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg" v-if="!opiLoadding"></uv-empty>
                    </view>
                </view>
            </template>
            <view v-else style="margin-top:8vh">
                <uv-empty text="暂无影片的放映信息"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
            </view>
        </template>
    </view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref , getCurrentInstance} from 'vue'
import { onLoad , onPageScroll} from "@dcloudio/uni-app"
import { getCinema , getCinemaHotMovies , getCinemaPlayDates , getCinemaPlayTimes } from "@/api/movie"
const isLoadding = ref<any>(true)
const Cinema = ref<any>({})
const Movie = ref<any>({})
const Movie1 = ref<any>({})
import { uniConfig } from '@/config/index'
const playDates = ref<any>([])
const MovieList = ref<any>([])
const playIndex = ref<any>(0)
const MovieIndex = ref<any>(0)
const gameTeamId = ref<any>('')
const getDates = () => {
	console.log("show23",Movie1.value.id)
    getCinemaPlayDates({
        movieid:Movie1.value.id,
        cinemaid:Cinema.value.id
    }).then(res => {
		 
        if(res.data.length > 0){
            playDates.value = res.data
            changePlayDate(res.data[0])
		}
       
        isLoadding.value = false
    })
}
const formatDateToTime = (str : any) => {
    return str.slice(11, 16)
}
const movieSessionList = ref<any>([])
const opiLoadding = ref<Boolean>(false)
const changePlayDate = (date : any) => {
    opiLoadding.value = true
    if(movieSessionList.value.length > 0){
        uni.showLoading({title:'场次更换中...'})
    }else uni.showLoading({title:'场次加载中...'})
    getCinemaPlayTimes({
        movieid:Movie1.value.id,
        cinemaid:Cinema.value.id,
        playdate:date
    }).then(res => {
        uni.hideLoading()
        opiLoadding.value = false
        movieSessionList.value = res.data
    })
}

const resolveSeat = (item : any) => {
    // uni.setStorageSync('opi',item)
    // uni.setStorageSync('Movie',Movie.value)
    uni.navigateTo({
        url:`/pages/movie/resolveSeats?opiid=${item.opiid}&gameTeamId=${gameTeamId.value}`
    })
}
const changeMovie = (index :any) =>{
	Movie1.value = MovieList.value[index]
	MovieIndex.value = index
	playIndex.value = 0
	getDates()
}
const changeDate = (index : any) => {
    playIndex.value = index
    changePlayDate(playDates.value[index])
}

onLoad(async (options : any) => {
	const { proxy } = getCurrentInstance();
	await proxy.$onLaunched;
    const movieId = uni.getStorageSync('movieId') //指定影片
    if(!movieId){
        uni.reLaunch({url:'/pages/index/index'})
        return;
    }
    gameTeamId.value = options.gameTeamId
    getCinema({cinemaid:options.cinemaid}).then(res => {
        Cinema.value = res.data
        getCinemaHotMovies({
            citycode:res.data.citycode,
            cinemaid:options.cinemaid
        }).then(cres => {
            if(cres.data.length > 0){
				cres.data =cres.data.filter((v:any)=>{
					return movieId.indexOf(v.id)!=-1
				})
			    console.log("res123",cres.data)
                MovieList.value = cres.data
				Movie1.value = MovieList.value[0];
				console.log("Movie12",MovieList.value);
                // cres.data.forEach(item => {
                //     if(item.id == movieId){
                //         Movie.value = item
                //         getDates()
                //     }
                // })
				getDates()
                if(!Movie.value.id){
                    isLoadding.value = false
                }
            }else{
                isLoadding.value = false
            }
        })
    })
})
</script>
<style lang="scss">
.cinema-box{
    padding:32upx;
    display: flex;
    flex-direction: column;
    background:#fff;
    font-size:26upx;
    text{
        font-weight: 600;
        font-size: 36upx;
        margin-bottom:12upx;
    }
}
.movie-box{
    padding:32upx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size:26upx;
    color:#fff;
    .image{
        width:40vw;
        border-radius: 7px;
        height:52vw;
        background-position: center;
        background-size:cover;
    }
    text{
        font-weight: 600;
        font-size: 36upx;
        margin:22upx 0 6upx;
    }
}
.date-box{
    display: flex;
    align-items: center;
    padding:32upx;
    white-space: nowrap;
    overflow-x: scroll;
    ._button{
        flex-basis: 240upx;
        flex-shrink: 0;
        white-space: nowrap;
        margin: 0 22upx 0 0;
    }
}
._button{
    height: 62upx;
    line-height: 62upx;
    width: 240upx;
    text-align: center;
    padding: 3upx;
    display: flex;
    border-radius: 72upx;
    overflow: hidden;
    ._button-inner{
      width:100%;
      background:#fff;
      color:#333;
      border-radius: 72upx;
        font-size:32rpx;
    }
    &._button-fill{
      ._button-inner{
        background:transparent;
        color:#fff;
      }
    }
}

.movie_session-wrap {
    padding:32upx;
    font-size:26upx;
    color:#fff;
    .movie_session-item--wrap {
        display: grid;
        grid-template-columns: 22% 40% 16% 22%;
        padding: 8px 0;
        margin: 6px 0;
        position:relative;
        border-bottom: 1px solid rgba(255,255,255,.1);
        > view {
            > text {
                display: inline-block;
                padding: 1px 0;
                width: 100%;
                text-align: center;
            }
            &.price_remark text {
                padding: 0;
            }

            .info_time {
                font-weight: 700;
                color: #fff;
                font-size:42upx;
                line-height: 1;
            }

            .price-grid {
                display: grid;
                grid-template-columns: auto auto;
                align-items: center;
                justify-items: end;
                gap: 0 5px;
                
                .sheng {
                    padding: 1px 4px;
                    background-color: #f5b225;
                    color: #fff;
                }
            }
        }
    }
    .movie_session-empty-wrap {
        margin: 8px 0;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        > view {
            padding: 5px 0;
        }
    }
    .fc-active{
        font-weight: 700;
        font-size:42upx;
        line-height: 1;
        color:#e0cc99;
    }
    ._button{
        width:130rpx;
    }
}
.fx-center-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.list1{
	display:flex;
	justify-content: space-around;
	
	 
}
.list1_item{
	border:3px solid #4D8ADB;
	width:28%;
	font-size:8upx;
	color:#4D8ADB;
	background-color:#ffffff;
	padding:1%;
}
._movie-fill{
    background:transparent;
    color:#fff;
}
</style>